<template>
  <div>
    <router-link to="/addOrUpdateRole">添加角色</router-link>
    <el-table :data="roleData" border style="width: 100%" fit>
      <el-table-column fixed prop="roleName" label="角色名"> </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
      <el-table-column prop="roleStatus" label="角色状态"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteRole(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
         <el-button type="text" size="small" @click="UpdateRole(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination 

    @next-click="queryNextPage"
    @prev-click="queryPrePage"
    @size-change="sizeChange"
    @current-change="currentChange"

    :pageSizes="pageSizes"
    :pageSize="pageSize"
    background layout="prev, pager, next,sizes,total,jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
      UpdateRole(id){
      this.$router.push("/addOrUpdateRole/"+id);
    },
    deleteRole(id) {
      console.log(id);
      var app = this;
      this.$httpRequest
        .get("role/delete/" + id, {})
        .then(function () {
          // app.$router.push("/toRoleList");
          app.getRolePage();
        })
        .catch(function (error) {
          //失败后调用
        })
        .then(function () {
          //不论成功或者失败后都调用
        });
    },
    




    handleClick(row) {
      console.log(row);
    },

        queryNextPage(page) {
      this.current = page;
      this.getRolePage();
    },
    queryPrePage(page) {
      this.current = page;
      this.getRolePage();
    },
     sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getRolePage();
    },
    currentChange(page){
      this.current = page;
      this.getRolePage();
    },


    //发送ajax请求
    getRolePage() {
      var app = this;
      this.$httpRequest
        .post("role/page", {
          current: app.current,
          size: app.pageSize,
        })
        .then(function ({ data }) {
          //成功后调用
          console.log("成功", data);
          app.roleData = data.page.records;
          app.current = data.page.current;
          app.size = data.page.size;
          app.total = data.page.total;
        })
        .catch(function (error) {
          //失败后调用
        })
        .then(function () {
          //不论成功或者失败后都调用
        });
    },
  },

  data() {
    return {
      total:50,
      size:5,
      current:1,
      pageSize:5,
      pageSizes:[5,10,15,20,25],
      
      roleData: [
        {
          roleName: "",
          roleDesc: "",
          roleStatus: "",
        },
      ],
    };
  },
  mounted: function () {
    //页面加载的时候调用
    this.getRolePage();
  },
};
</script>